<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/tools.js"></script>
		
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				
			}
			
			#outer{
				position: relative;
				width: 520px;
				height: 333px;
				background-color: pink;
				padding: 10px 0;
				margin: 50px auto;
				overflow: hidden;
			}
			#imgList{
				list-style: none;
				
				left: 0;
				
				position: absolute;
				
				}
				
			#imgList li{
				float: left;
				margin: 0 10px;
				
			}
			
			#navDiv{
				position: absolute;
				
				bottom: 10px;
			}
			#navDiv a{
				float: left;
				width: 15px;
				height: 15px;
				background-color: green;
				margin:  0 5px;
				opacity: 50%;
				/*兼容IE*/
				filter: alpha(opacity=50);
			}
			
			#navDiv a:hover{
				background-color: black;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				//获取imgList
				var imgList = document.getElementById("imgList");
				//获取所有的img
				var imgArry = document.getElementsByTagName("img");
				//修改宽度
				imgList.style.width = imgArry.length * 520 + "px";
				//获取navDiv
				var navDiv = document.getElementById("navDiv");
				//获取所有a
				var allA = document.getElementsByTagName("a");
				//获取outer
				var outer = document.getElementById("outer");
				//设置navDiv的值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
				//console.log(navDiv.offsetWidth);
			
				//设置默认显示图片的索引值
				var index = 0;
				
				allA[index].style.backgroundColor = "black";
				
				
				//遍历所有a
				for(var i=0 ; i<allA.length ; i++){
					
					//为每个添加一个num属性
					allA[i].num = i;
					
					//为所有的a绑定单机响应函数
					allA[i].onclick = function(){
						
						//关闭自动切换的定时器
						clearInterval(timer);
						
						index = this.num;
						
						setA();
						
						move(imgList , "left" , -520*index , 20 , function(){
							//动画执行完毕，开启自动切换
							autoChange();
						});
					};
				}
				//开启自动切换图片
			autoChange();
				
			function setA(){
				if(index >= imgArry.length - 1){
					index = 0;
					
					imgList.style.left = 0;
				}
				
				for(var i=0 ; i< allA.length; i++){
					allA[i].style.backgroundColor = "";
				}
					allA[index].style.backgroundColor = "black";
				
			};
			
				//创建一个自动切换定时器的标识
				var timer;
				
				function autoChange(){
					//开启一个定时器，用来来回切换图片
					setInterval(function(){
						//使索引自增
						index++;
						
						index %= imgArry.length;
						
						//执行动画，切换图片
						move(imgList , "left" , -520*index , 20 , function(){
							setA();
						});
					},3000);
				}
				
			};
			
			
			
			
		</script>
	</head>
	<body>
		<!--创建外部容器-->
		<div id="outer">
			<!--创建一个无序列表用来放图片-->
			<ul id="imgList">
				<li><img src="img/dl.jpg" alt="" /></li>
				<li><img src="img/1.jpg" alt="" /></li>
				<li><img src="img/2.jpg" alt="" /></li>
				<li><img src="img/3.jpg" alt="" /></li>
				<li><img src="img/4.jpg" alt="" /></li>
				<li><img src="img/5.jpg" alt="" /></li>
				<li><img src="img/dl.jpg" alt="" /></li>
				
			</ul>
			
			<!--创建小圆点-->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>
